﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title>WMA Grpah</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <style>
  	body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }  
  </style>
  
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>
  
   <script type="text/javascript">
	var chart;
	var name1='';
	$(document).ready(function () {
    
	//http://jsfiddle.net/NULTY/456/ <--check psudo code
	Highcharts.setOptions({
     colors: ['#463E3F', '#504A4B', '#848482', '#3EA055', '#4CC417', '#7FE817', '#8AFB17','#F70D1A','#FF0000', '#E55451', '#E77471','#E78A61','#157DEC','#1589FF','#6495ED','#6495ED','#3BB9FF','#82CAFA']
    }); 
       
		var colors = Highcharts.getOptions().colors,
			categories = [ 'ภาค1 สสป.','ภาค1สสพ.','ภาค1 สสส.','ภาค2 สสญ.','ภาค2 สสท.','ภาค2 สสม.','ภาค2 สสล.','ภาค3 สสข.','ภาค3 สสช.','ภาค3 สสน.','ภาค3 สสมบ.','ภาค3 สสสภ.','ภาค4 สสต.','ภาค4 สสบ.','ภาค4 สสบท.','ภาค4 สสภ.','ภาค4 สสมส.','ภาค4 สสว.'],
			name = 'สาขา',
			level = 0,
			data = [{ y:10592, color: colors[0], drilldown: { name: 'ภาค1 สสป.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09','zone10','zone11'], level: 1, data: [{ y: 1016, drilldown: { level: 2, name: 'zone01', categories: ['DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [148,118,106,128,77,91,103,88,80,77], color: colors[0] } },{ y: 225, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02'], data: [11,214], color: colors[0] } },{ y: 944, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [181,83,66,105,170,147,192], color: colors[0] } },{ y: 1198, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [58,208,179,131,378,244], color: colors[0] } },{ y: 939, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [159,114,57,222,166,221], color: colors[0] } },{ y: 1419, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [211,184,205,206,192,89,179,153], color: colors[0] } },{ y: 1898, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [267,126,109,212,67,226,214,118,346,213], color: colors[0] } },{ y: 705, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [269,100,149,187], color: colors[0] } },{ y: 679, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [48,134,115,71,111,104,96], color: colors[0] } },{ y: 525, drilldown: { level: 2, name: 'zone10', categories: ['DMA01','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [10,101,119,88,169,38], color: colors[0] } },{ y: 1044, drilldown: { level: 2, name: 'zone11', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [103,393,178,67,111,192], color: colors[0] } }], color: colors[0] } },{ y:8184, color: colors[1], drilldown: { name: 'ภาค1สสพ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 1190, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [132,175,127,345,350,61], color: colors[1] } },{ y: 1085, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [101,88,149,228,121,179,135,84], color: colors[1] } },{ y: 967, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [173,173,119,185,234,83], color: colors[1] } },{ y: 1399, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [125,164,93,198,138,126,144,167,244], color: colors[1] } },{ y: 1755, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [181,159,95,262,91,278,144,251,294], color: colors[1] } },{ y: 584, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA04','DMA05'], data: [143,185,124,132], color: colors[1] } },{ y: 1204, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [130,74,68,162,233,198,339], color: colors[1] } }], color: colors[1] } },{ y:8792, color: colors[2], drilldown: { name: 'ภาค1 สสส.', categories: ['zone01','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 1796, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [94,100,87,159,151,227,169,143,297,84,285], color: colors[2] } },{ y: 292, drilldown: { level: 2, name: 'zone03', categories: ['DMA11','DMA12','DMA13','DMA14'], data: [24,39,117,112], color: colors[2] } },{ y: 2033, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15','DMA16','DMA18','DMA19'], data: [124,86,240,87,173,159,35,109,78,59,148,144,113,71,149,129,34,95], color: colors[2] } },{ y: 1327, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15'], data: [64,40,85,125,97,69,87,65,108,121,186,171,47,10,52], color: colors[2] } },{ y: 1649, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [140,211,465,130,75,1,269,108,55,89,106], color: colors[2] } },{ y: 1695, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [142,184,113,145,261,347,339,50,36,32,46], color: colors[2] } }], color: colors[2] } },{ y:8058, color: colors[3], drilldown: { name: 'ภาค2 สสญ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06'], level: 1, data: [{ y: 1195, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [74,104,184,164,193,131,106,119,120], color: colors[3] } },{ y: 1260, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [75,81,78,102,258,76,327,87,176], color: colors[3] } },{ y: 1742, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13'], data: [63,180,130,90,66,168,67,123,57,132,173,120,373], color: colors[3] } },{ y: 967, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [92,108,149,106,93,84,167,168], color: colors[3] } },{ y: 1534, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [98,213,131,119,93,179,117,63,115,141,106,159], color: colors[3] } },{ y: 1360, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13'], data: [185,176,214,209,83,88,39,84,110,33,27,59,53], color: colors[3] } }], color: colors[3] } },{ y:5042, color: colors[4], drilldown: { name: 'ภาค2 สสท.', categories: ['zone01','zone02','zone03','zone04','zone05'], level: 1, data: [{ y: 1073, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [218,70,145,100,93,42,78,175,152], color: colors[4] } },{ y: 994, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [46,223,225,139,106,116,110,29], color: colors[4] } },{ y: 711, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [104,134,225,74,95,79], color: colors[4] } },{ y: 905, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [56,87,95,75,44,159,119,44,13,198,15], color: colors[4] } },{ y: 1359, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14'], data: [164,182,44,53,71,74,100,134,185,43,21,196,51,41], color: colors[4] } }], color: colors[4] } },{ y:6978, color: colors[5], drilldown: { name: 'ภาค2 สสม.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06'], level: 1, data: [{ y: 940, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [57,126,218,206,262,71], color: colors[5] } },{ y: 1066, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [113,146,239,110,114,141,203], color: colors[5] } },{ y: 982, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [54,181,185,111,35,141,76,199], color: colors[5] } },{ y: 1367, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [133,45,95,260,253,180,181,220], color: colors[5] } },{ y: 1307, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [101,56,264,72,252,46,132,78,165,141], color: colors[5] } },{ y: 1316, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [112,49,134,85,179,163,153,134,203,46,14,44], color: colors[5] } }], color: colors[5] } },{ y:10202, color: colors[6], drilldown: { name: 'ภาค2 สสล.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 1329, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [189,196,157,164,236,145,116,126], color: colors[6] } },{ y: 1285, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [135,188,133,219,54,95,264,197], color: colors[6] } },{ y: 1488, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [248,105,99,238,107,53,48,133,203,55,199], color: colors[6] } },{ y: 1449, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [189,222,124,172,266,185,152,80,59], color: colors[6] } },{ y: 1563, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [209,132,102,71,299,83,156,193,150,168], color: colors[6] } },{ y: 1812, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [336,410,171,109,52,135,82,319,124,74], color: colors[6] } },{ y: 1276, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [128,196,244,165,188,155,110,90], color: colors[6] } }], color: colors[6] } },{ y:5966, color: colors[7], drilldown: { name: 'ภาค3 สสข.', categories: ['zone02','zone03','zone04','zone05','zone06','zone07','zone08'], level: 1, data: [{ y: 1051, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [244,158,271,189,189], color: colors[7] } },{ y: 852, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA04','DMA05'], data: [134,325,258,135], color: colors[7] } },{ y: 803, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [126,259,275,143], color: colors[7] } },{ y: 964, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [111,242,344,267], color: colors[7] } },{ y: 643, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [139,171,97,77,159], color: colors[7] } },{ y: 953, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [194,132,94,54,143,108,134,94], color: colors[7] } },{ y: 700, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [202,223,48,227], color: colors[7] } }], color: colors[7] } },{ y:8036, color: colors[8], drilldown: { name: 'ภาค3 สสช.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09'], level: 1, data: [{ y: 699, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [29,145,76,191,118,104,36], color: colors[8] } },{ y: 547, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [116,64,137,92,61,77], color: colors[8] } },{ y: 781, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [106,98,105,133,152,187], color: colors[8] } },{ y: 599, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [130,230,45,58,136], color: colors[8] } },{ y: 1018, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [61,273,277,118,13,122,93,20,41], color: colors[8] } },{ y: 947, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [139,267,204,337], color: colors[8] } },{ y: 1353, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [218,280,273,227,117,238], color: colors[8] } },{ y: 1151, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [152,157,234,242,168,198], color: colors[8] } },{ y: 941, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [219,199,104,58,122,164,75], color: colors[8] } }], color: colors[8] } },{ y:7977, color: colors[9], drilldown: { name: 'ภาค3 สสน.', categories: ['zone03','zone05','zone06','zone08','zone09'], level: 1, data: [{ y: 1260, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [92,68,105,71,66,113,110,173,132,154,144,32], color: colors[9] } },{ y: 1593, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14'], data: [82,52,84,207,91,201,49,144,98,169,56,70,91,199], color: colors[9] } },{ y: 1647, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14'], data: [51,136,143,67,94,84,221,168,203,69,182,113,89,27], color: colors[9] } },{ y: 1347, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [126,287,104,97,147,136,111,96,174,69], color: colors[9] } },{ y: 2130, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15'], data: [268,117,244,111,62,130,132,48,180,161,133,132,238,27,147], color: colors[9] } }], color: colors[9] } },{ y:7230, color: colors[10], drilldown: { name: 'ภาค3 สสมบ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone08','zone09'], level: 1, data: [{ y: 1349, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [366,225,54,204,390,110], color: colors[10] } },{ y: 1115, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [163,89,304,299,158,102], color: colors[10] } },{ y: 1134, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [388,158,138,450], color: colors[10] } },{ y: 687, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02'], data: [336,351], color: colors[10] } },{ y: 1352, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [453,74,311,90,29,63,332], color: colors[10] } },{ y: 656, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [126,128,28,204,145,25], color: colors[10] } },{ y: 385, drilldown: { level: 2, name: 'zone08', categories: ['DMA01'], data: [385], color: colors[10] } },{ y: 552, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA05'], data: [133,159,63,197], color: colors[10] } }], color: colors[10] } },{ y:5529, color: colors[11], drilldown: { name: 'ภาค3 สสสภ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09'], level: 1, data: [{ y: 295, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03'], data: [61,156,78], color: colors[11] } },{ y: 224, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03'], data: [36,94,94], color: colors[11] } },{ y: 479, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [127,137,129,86], color: colors[11] } },{ y: 707, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [227,136,185,117,42], color: colors[11] } },{ y: 733, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [150,176,229,160,18], color: colors[11] } },{ y: 1028, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [70,76,134,163,183,308,94], color: colors[11] } },{ y: 1120, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [164,93,101,137,201,242,182], color: colors[11] } },{ y: 555, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03'], data: [218,270,67], color: colors[11] } },{ y: 388, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02'], data: [82,306], color: colors[11] } }], color: colors[11] } },{ y:9605, color: colors[12], drilldown: { name: 'ภาค4 สสต.', categories: ['zone01','zone02','zone03','zone04','zone08','zone12','zone13','zone14','zone15','zone16'], level: 1, data: [{ y: 765, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA07'], data: [168,116,231,181,69], color: colors[12] } },{ y: 907, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [231,120,83,137,44,88,113,91], color: colors[12] } },{ y: 672, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [45,123,126,101,111,166], color: colors[12] } },{ y: 726, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [141,188,207,190], color: colors[12] } },{ y: 1580, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [346,436,381,417], color: colors[12] } },{ y: 810, drilldown: { level: 2, name: 'zone12', categories: ['DMA01','DMA02','DMA03'], data: [492,139,179], color: colors[12] } },{ y: 856, drilldown: { level: 2, name: 'zone13', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [137,140,175,122,150,132], color: colors[12] } },{ y: 2031, drilldown: { level: 2, name: 'zone14', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [209,109,266,222,298,236,347,107,237], color: colors[12] } },{ y: 412, drilldown: { level: 2, name: 'zone15', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [132,77,71,45,87], color: colors[12] } },{ y: 846, drilldown: { level: 2, name: 'zone16', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [61,133,125,86,53,112,98,178], color: colors[12] } }], color: colors[12] } },{ y:7414, color: colors[13], drilldown: { name: 'ภาค4 สสบ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09'], level: 1, data: [{ y: 597, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [42,107,144,73,139,92], color: colors[13] } },{ y: 511, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [154,138,50,109,60], color: colors[13] } },{ y: 674, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [75,49,93,103,238,116], color: colors[13] } },{ y: 975, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [57,102,337,92,232,73,82], color: colors[13] } },{ y: 642, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [192,99,160,191], color: colors[13] } },{ y: 1127, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [157,300,186,257,227], color: colors[13] } },{ y: 1051, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [133,189,297,432], color: colors[13] } },{ y: 815, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [257,256,157,145], color: colors[13] } },{ y: 1022, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [132,137,79,124,84,41,142,130,75,78], color: colors[13] } }], color: colors[13] } },{ y:4823, color: colors[14], drilldown: { name: 'ภาค4 สสบท.', categories: ['zone01','zone02','zone04','zone05','zone07','zone08','zone09'], level: 1, data: [{ y: 781, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [60,42,102,65,232,280], color: colors[14] } },{ y: 1000, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [141,133,125,357,244], color: colors[14] } },{ y: 860, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [119,178,121,132,201,109], color: colors[14] } },{ y: 341, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03'], data: [155,80,106], color: colors[14] } },{ y: 355, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [53,84,109,37,72], color: colors[14] } },{ y: 666, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [76,99,83,46,55,97,45,43,122], color: colors[14] } },{ y: 820, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [127,184,140,47,96,39,187], color: colors[14] } }], color: colors[14] } },{ y:7770, color: colors[15], drilldown: { name: 'ภาค4 สสภ.', categories: ['zone03','zone05','zone06','zone07','zone08','zone10'], level: 1, data: [{ y: 1345, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [128,220,83,131,106,130,148,111,121,85,82], color: colors[15] } },{ y: 830, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [139,145,158,105,106,177], color: colors[15] } },{ y: 1259, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [152,152,127,140,70,85,84,139,310], color: colors[15] } },{ y: 1609, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [173,113,165,189,201,101,112,127,99,182,147], color: colors[15] } },{ y: 1130, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [68,155,97,114,101,136,89,70,189,111], color: colors[15] } },{ y: 1597, drilldown: { level: 2, name: 'zone10', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15','DMA16'], data: [152,79,81,82,134,120,125,72,52,65,142,116,81,108,115,73], color: colors[15] } }], color: colors[15] } },{ y:5761, color: colors[16], drilldown: { name: 'ภาค4 สสมส.', categories: ['zone01','zone03','zone06','zone09','zone11','zone13','zone16'], level: 1, data: [{ y: 1030, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA10'], data: [217,190,202,176,245], color: colors[16] } },{ y: 706, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02'], data: [533,173], color: colors[16] } },{ y: 743, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [125,149,181,76,93,119], color: colors[16] } },{ y: 886, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02'], data: [342,544], color: colors[16] } },{ y: 907, drilldown: { level: 2, name: 'zone11', categories: ['DMA05','DMA06','DMA07','DMA08','DMA09'], data: [271,121,154,143,218], color: colors[16] } },{ y: 793, drilldown: { level: 2, name: 'zone13', categories: ['DMA03','DMA04','DMA05','DMA06'], data: [366,215,115,97], color: colors[16] } },{ y: 696, drilldown: { level: 2, name: 'zone16', categories: ['DMA07','DMA08','DMA09'], data: [241,227,228], color: colors[16] } }], color: colors[16] } },{ y:7385, color: colors[17], drilldown: { name: 'ภาค4 สสว.', categories: ['zone05','zone06','zone07','zone09','zone10','zone11','zone17','zone18'], level: 1, data: [{ y: 1104, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [219,186,94,88,129,207,181], color: colors[17] } },{ y: 802, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [102,168,58,157,105,212], color: colors[17] } },{ y: 885, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [104,97,248,179,78,83,96], color: colors[17] } },{ y: 489, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03'], data: [162,254,73], color: colors[17] } },{ y: 560, drilldown: { level: 2, name: 'zone10', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [93,39,94,78,98,90,68], color: colors[17] } },{ y: 1462, drilldown: { level: 2, name: 'zone11', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [176,130,169,66,97,130,189,186,67,54,117,81], color: colors[17] } },{ y: 996, drilldown: { level: 2, name: 'zone17', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [292,151,146,133,72,187,15], color: colors[17] } },{ y: 1087, drilldown: { level: 2, name: 'zone18', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [143,214,120,283,92,235], color: colors[17] } }], color: colors[17] } }];
			
	   
		function setChart(name, categories, data, color, level) {
			chart.xAxis[0].setCategories(categories);
			chart.series[0].remove();
		   
		   
			chart.addSeries({
				name: name,
				data: data,
				level: level,
				color: color || 'white'
			});
		}
	   
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container', 
				type: 'column'
			},
			title: {
				text: 'จำนวนประตูน้ำของการประปานครหลวง'
			},
			subtitle: {
				text: 'จำนวนประตูน้ำของการประปานครหลวงรวมทุกสาขา'
			},
			xAxis: {
				categories: categories                     
			},
			yAxis: {
				title: {
					text: 'จำนวนประตูน้ำ'
				}
			},
			plotOptions: {
				column: {
					cursor: 'pointer',
					point: {
						events: {
							click: function() {

								var drilldown = this.drilldown;
								if (drilldown) { // drill down
								
								this.series.chart.setTitle({
									    text: 'จำนวนประตูน้ำของการประปานครหลวง'
									 }, {
										text:  'จำนวนประตูน้ำของการประปานครหลวงภายใน ' +name1 +' '+drilldown.name
										});
									//console.log(drilldown);
									name1 = drilldown.name;
								
									setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
								} else { // restore
									name1 = '';
									chart.setTitle({
									    text: 'จำนวนประตูน้ำของการประปานครหลวง'
									 }, {
										text: 'จำนวนประตูน้ำของการประปานครหลวงรวมทุกสาขา'
										});
									setChart(name, categories, data, null,level);
								}
							}
						}
					},
					dataLabels: {
						enabled: true,
						color: colors[0],
						style: {
							fontWeight: 'bold'
						},
						formatter: function() {
							return this.y +'ตัว';
						}
					}               
				}
			},
			tooltip: {
				formatter: function() {
					/*var point = this.point, s = '';
					
					 switch (this.series.options.level) {
						case 0:
							s = 'row 1 level 1 instructions<br/>';
							s += ' row 2 level 1 instructions';
							break;
						
						case 1:
							s = 'row 1 level 2 instructions <br/>';
							s += ' row 2 level 2 instructions';
							break;
						
						case 2:
							s = 'row 1 level 3 instructions<br/>';
							s += 'row 2 level 3 instructions';
							break;
					}*/
						var point = this.point,
							s = this.x +'มีประตูน้ำทั้งหมด จำนวน: <b>'+ this.y +'ตัว</b><br/>';
						if (point.drilldown) {
							s += 'คลิ๊กเพื่อดูรายละเอียดของข้อมูลใน '+ point.category;
						} else {
							s += 'คลิ๊กเพื่อกลับไปดูข้อมูลรายสาขา';
						}
			 
				 
					return s;
				}
			},
			series: [{
				name: name,
				level: level,
				data: data,
				color: 'white'
			}],
			exporting: {
				enabled: false
			}
		});
	   
	   
	});
    
	</script>
  
</head>
<body>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</body>
</html>